<template>
  <div class="withdraw-operate">
    <Form class="form" ref="form">
      <CellGroup inset>
        <Field label="类型">
          <template #input>
            <div class="tags">
              <Button type="primary" size="mini"
                @click="config.method = WithdrawMethodType.支付宝">
                {{ WithdrawMethodType[WithdrawMethodType.支付宝] }}
              </Button>
              <!-- <Button type="primary" size="mini">
                {{ WithdrawMethodType[WithdrawMethodType.微信] }}
              </Button>
              <Button type="primary" size="mini">
                {{ WithdrawMethodType[WithdrawMethodType.银行卡] }}
              </Button> -->
            </div>
          </template>
        </Field>
        <Field v-model="config.account" label="账号"
          name="account" placeholder="请填写账号"
          autocomplete="off"
          :rules="rules.account" />
        <Field v-model="config.accountName"
          name="account" label="姓名"
          autocomplete="off" placeholder="请填写真实姓名"
          :rules="rules.accountName" />
      </CellGroup>
    </Form>
    <div
      class="footer van-hairline--top van-dialog__footer">
      <Button @click="props.hide" size="large"
        class="van-button van-button--default van-button--large van-dialog__cancel">取消</Button>
      <Button type="default" size="large" :class="[
        'van-button', 'van-button--default', 'van-button--large', 'van-dialog__confirm',
        'van-hairline--left'
      ]" @click="handleSubmit()">确定</Button>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  Button, CellGroup, Field, Form,
} from 'vant';
import { onMounted, type PropType } from 'vue';

import { WithdrawMethodType } from '../const';
import useWithdrawAccount from '../hooks/useWithdrawAccount';
import type { WithdrawAccountItem } from '../models/WithdrawAccount';

const props = defineProps({
  scope: {
    type: Object as PropType<{
      title: string;
      record?: WithdrawAccountItem,
      reload?: () => void;
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

const {
  config, form, handleAdd, handleUpdate,
} = useWithdrawAccount();

const rules = {
  account: [
    { required: true, message: '请填写账号' },
  ],
  accountName: [
    { required: true, message: '请填写真实姓名' },
  ],
};

onMounted(() => {
  if (props.scope.record) {
    config.value.id = props.scope.record.id;
    config.value.account = props.scope.record.account;
    config.value.accountName = props.scope.record.accountName;
    config.value.method = props.scope.record.method;
  }
  config.value.method = WithdrawMethodType.支付宝;
});

const handleSubmit = async () => {
  if (props.scope.record) {
    await handleUpdate();
  } else {
    await handleAdd();
  }
  if (props.scope.reload) {
    props.scope.reload();
  }
  props.hide();
};
</script>
<style lang="less" scoped>
.withdraw-operate {
  .tags {
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    font-size: 10px;
  }
}
</style>
